sym blog > react typescript jest config (二)

react typescript jest config (二)

2019-08-07

jest, typescript, react, enzyme

1. Add a basic TypeScript configuration file

tsconfig.json
You’ll want to bring your TypeScript files together - both the code you’ll be writing as well as any necessary declaration files.

To do this, you’ll need to create a tsconfig.json which contains a list of your input files as well as all your compilation settings. Simply create a new file in your project root named tsconfig.json and fill it with the following contents:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// tsconfig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "target": "es5",
        "module": "commonJs", // 组织代码方式
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "removeComments": true, // 编译 js 的时候，删除掉注释
        "typeRoots": [], // 默认所有可见的"@types"包会在编译过程中被包含进来
        /**
        *添加types后，目前加index.tsx后会报错
        */
        "types": ["node", "lodash"], // 只有被列出来的包才会被包含进来
        "baseUrl": "."
    },
    "exclude": [ // 不需要编译
        "node_modules",
        "dist",
        "webpack",
        "jest",
        "enzyme",
        "**/*.test.ts",
        "**/*.test.tsx"
    ],
    "include": [
        "./src/**/*"
    ]
}

tsconfig module click here

2. webpack basic config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// webpack.bask.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/index.tsx",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"],
        alias: {
            components: path.resolve(__dirname, "src/components/")
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: "awesome-typescript-loader"
            },
            {
                test: /\.js$/,
                enforce: "pre",
                loader: "source-map-loader"
            }
        ]
    },
    plugins: [
      new HtmlWebpackPlugin({
      template: './src/index.html'
     })
    ],
    externals: {
        react: "React",
        reactDom: "ReactDom"
    }
}

3. jest enzyme basic config

setup enzyme config

1
2
3
4
// config/setup-test.ts
import {configure} from "enzyme";
import * as Adapter from "anzyme-adater-react-16"
configure({adapter: new Adapter()});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  "roots": [ // 要测试的根目录默认为<rootDir>
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  // 设置识别哪些文件是测试文件（正则形式），与testMatch互斥
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ], 
  // 测试环境，默认值是：jsdom，可修改为node
  testRnviroment: "jsdom",
  // setup enzyme
  setupFilesAfterEnv: ["<rootDir>/src/config/setup-test.ts"],
  snapshotSerializers: ["enzyme-to-json/serializer"]
}

4. jest-enzyme config（这一点实现有问题，请暂时忽略）

The best setup is to use jest-environment-enzyme

1
npm i jest-environment-enzyme jest-enzyme -D

jest config add like: 

1
2
3
4
5
6
7
{
  "setupTestFrameworkScriptFile": "jest-enzyme",
  "testEnvironment": "enzyme",
  "testEnvironmentOptions": {
    "enzymeAdapter": "react16"
  }
}

If you prefer not to use the environment, you can also do this:

1
2
3
{
  "setupFilesAfterEnv": ['./node_modules/jest-enzyme/lib/index.js'],
}

As with Create React App, when using jest-enzyme with TypeScript and ts-jest, you’ll need to add a setupTests.ts file to your app that explicitly imports jest-enzyme, and point the setupTestFrameworkScriptFile field in your jest.config.js or package.json.

1
2
3
4
5
6
// setupTests.ts
import 'jest-enzyme';
// jest.config.js
{
  "setupTestFrameworkScriptFile": "./src/config/setupTests.ts" 
}

** notice: 测试组件文件后缀为.tsx **
“setupTestFrameworkScriptFile” was replace by configuration “setupFilesAfterEnv”, which supports multi path.

1
2
3
{
  "setupFilesAfterEnv": ['./node_modules/jest-enzyme/lib/index.js', 'jest-enzyme'],
}